<template>
	<view class="app app-bg">
		<!-- 页面内容开始 -->
		<view style="height: 30rpx;"></view>
		<!-- 会员卡样式 -->
		<view class="vip-card">
			<view class="name">{{ vipInfo.name }}</view>
			<view class="nickname" v-if="isHaveCom">所属人：{{ vk.getVuex("$user.userInfo.nickname") }}</view>
			<view class="add-time" v-if="isHaveCom">成为VIP之日：<text class="time-text">{{ $fn.timeFormat(vk.getVuex("$user.userInfo.vip_get_time"),'yyyy-MM-dd') }}</text> </view>
			<view class="add-time" v-if="isHaveCom">成为VIP的第<text class="time-text">{{ vk.myfn.user.getVipDay() }}</text> 天</view>
			<!-- <view class="add-time" v-if="isHaveCom">成为该等级之日：<text class="time-text">{{ $fn.timeFormat(vk.getVuex("$user.userInfo.vip_lv_get_time"),'yyyy-MM-dd') }}</text> </view> -->
			<view class="vip-bg">VIP</view>
		</view>


		<!-- 下一级升级信息(当我已拥有会员等级且还有下一级会员等级可以升级时显示) -->
		<view class="vip-explain" v-if="complete && nextLevelInfo && nextLevelInfo.name">
			<view class="cell-box">
				<view class="title">{{upgradeTextCom }}</view>
				<view class="text">{{ nextLevelInfo.name }} 条件</view>
			</view>
			<view class="cell-box">
				<view class="title"></view>
				<view class="text">任意满足一条即可<text>{{ isUpgrade ? '（已达标）':'（未达标）' }}</text></view>
			</view>
			<view class="list" v-if="nextLevelInfo && nextLevelInfo.name">

				<view class="list-item" v-if="nextLevelInfo.total_recharge_amount>0">
					<u-icon name="vk-mall-icon-jine" size="80"></u-icon>
					<view class="list-item-text">
						<view class="item-title">累计充值余额</view>
						<view class="item-amount">{{ $fn.priceFilter(nextLevelInfo.total_recharge_amount) }}<text v-if="differenceRechargeAmountCom>0">（差{{ differenceRechargeAmountCom }}）</text></view>
					</view>
					<u-circle-progress type="success" :percent="totalRechargeAmountPercentCom" bg-color="#f7f9fd" width="130" border-width="10">
						<view class="u-progress-content">
							<view class="u-progress-dot"></view>
							<text class='u-progress-info'>{{ totalRechargeAmountPercentCom }}%</text>
						</view>
					</u-circle-progress>
				</view>

				<view class="list-item" v-if="nextLevelInfo.total_order_amount>0">
					<u-icon name="vk-mall-icon-gouwuche" size="80"></u-icon>
					<view class="list-item-text">
						<view class="item-title">累计消费金额</view>
						<view class="item-amount">{{ $fn.priceFilter(nextLevelInfo.total_order_amount) }}<text v-if="differenceOrderAmountCom>0">（差{{ differenceOrderAmountCom }}）</text></view>
						<view class="sum-not-receipt-amount" v-if="sumNotReceiptAmount>0">您有 {{ $fn.priceFilter(sumNotReceiptAmount) }} 未确认收货</view>
						<view class="sum-not-receipt-amount" v-if="sumNotReceiptAmount>0">确认收货后才计入消费金额</view>
					</view>
					<u-circle-progress type="success" :percent="totalOrderAmountPercentCom" bg-color="#f7f9fd" width="130" border-width="10">
						<view class="u-progress-content">
							<view class="u-progress-dot"></view>
							<text class='u-progress-info'>{{ totalOrderAmountPercentCom }}%</text>
						</view>
					</u-circle-progress>
				</view>

				<view class="list-item" v-if="nextLevelInfo.goods_ids && nextLevelInfo.goods_ids.length>0">
					<u-icon name="vk-mall-icon-gouwuche" size="80"></u-icon>
					<view class="list-item-text">
						<view class="item-title">购买指定会员商品</view>
						<view class="item-amount"></view>
					</view>
					<u-circle-progress type="success" :percent="isBuyVipGoodsCom" bg-color="#f7f9fd" width="130" border-width="10">
						<view class="u-progress-content">
							<view class="u-progress-dot"></view>
							<text class='u-progress-info'>{{ isBuyVipGoodsCom }}%</text>
						</view>
					</u-circle-progress>
				</view>
			</view>
		</view>
		<block v-if="complete">

			<view class="receive-btn" v-if="isMaxLv"> 恭喜您已达到最高级别 </view>
			<view class="receive-btn" v-else-if="isUpgrade" @click="receiveVip(nextLevelInfo.lv)"> 立即{{ upgradeTextCom }} {{ nextLevelInfo.name }} </view>
			<view class="receive-btn" v-else> 未达标 </view>
		</block>

		<!-- 会员卡权益 -->
		<view class="vip-explain" v-if="showVipBenefitsCom">
			<view class="cell-box">
				<view class="text" style="width: 100%;">{{ vipInfo.name }} 会员权益</view>
			</view>
			<view class="list">

				<view class="list-item" v-if="vipInfo.discount<1">
					<u-icon name="vk-mall-icon-huiyuan" size="80"></u-icon>
					<view class="list-item-text">
						<view class="item-title">会员折扣</view>
						<view class="item-describe">购物享 {{ $fn.discountFilter(vipInfo.discount) }}</view>
					</view>
				</view>

				<view class="list-item" v-if="vipInfo.is_free_shipping">
					<u-icon name="vk-mall-icon-wuliu" size="80"></u-icon>
					<view class="list-item-text">
						<view class="item-title">包邮</view>
						<view class="item-describe">所有商品满 {{ $fn.priceFilter(vipInfo.free_shipping_min_order_amount)}} 元包邮</view>
					</view>
				</view>

				<view class="list-item" v-if="vipInfo.integral_ratio>1">
					<u-icon name="vk-mall-icon-jifen" size="80"></u-icon>
					<view class="list-item-text">
						<view class="item-title">积分</view>
						<view class="item-describe">积分获取倍率 * {{ vipInfo.integral_ratio }}</view>
					</view>
				</view>

				<view class="list-item" v-for="(item,index) in vipInfo.custom_service" :key="index">
					<u-icon name="vk-mall-icon-quanyi" size="80"></u-icon>
					<view class="list-item-text">
						<view class="item-title">{{ item.name }}</view>
						<view class="item-describe">{{ item.comment }}</view>
					</view>
				</view>

			</view>
		</view>

		<!-- 若可自主领取,则出现领取按钮 -->
		<!-- <block v-if="complete">
			<view class="receive-btn" v-if="!isHaveCom" @click="receiveVip(1)"> 领取会员卡 </view>
			<view class="receive-btn" v-else> 您已拥有此会员卡 </view>
		</block> -->
		<view style="height: 20rpx;display: block;" class="safe-area-inset-bottom"></view>

		<!-- 页面内容结束 -->
		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
		<vk-data-loading v-model="loading"></vk-data-loading>
	</view>
</template>

<script>
	var vk = uni.vk;			// vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				vipInfo:{
					name:"获取中...",
					get_time:0
				},
				// 下一级信息
				nextLevelInfo:{

				},
				sumReceiptAmount:0,
				sumNotReceiptAmount:0,
				isBuyVipGoods:false,
				// init请求返回的数据
				data:{

				},
				// 表单请求数据
				form1:{

				},
				scrollTop:0,
				loading:false,
				complete:false
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
			this.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options){
				this.getMyInfo();
			},
			getMyInfo(){
				let that = this;
				vk.callFunction({
					url: 'client/user.getMyVipInfo',
					success: (data) => {
						let { userInfo={} } = data;
						let vipLevelRule = vk.getVuex("$user.mchInfo.vip_level_rule");
						let showLv = userInfo.vip_lv;
						// 如果我的等级是0,代表我不是会员,因此需要展示等级1的会员信息
						let item = vk.pubfn.getListItem(vipLevelRule, "lv", showLv == 0 ? 1 : showLv);
						that.vipInfo = item;
						that.sumReceiptAmount = data.sumReceiptAmount;
						that.sumNotReceiptAmount = data.sumNotReceiptAmount;
						// 获取下一级
						that.nextLevelInfo = vk.pubfn.getListItem(vipLevelRule, "lv", showLv+1);
						if (data.mchInfo) vk.setVuex("$user.mchInfo", data.mchInfo);
						that.isBuyVipGoods = data.isBuyVipGoods;
						that.complete = true;
					}
				});
			},
			// 领取会员卡,只有满足条件才可领取会员卡
			receiveVip(lv){
				vk.callFunction({
					url: 'client/user.receiveVip',
					title: '请求中...',
					data: {
						lv
					},
					success: (data) => {
						if (data.isUpgrade) {
							vk.toast("升级成功","ok");
							this.getMyInfo();
						} else {
							vk.alert("未满足升级条件");
						}
					}
				});
			}
		},
		// 监听器
		watch:{

		},
		// 计算属性
		computed:{
			isHaveCom(){
				return vk.getVuex("$user.userInfo.vip_lv") > 0 ? true : false;
			},
			// 是否可升级
			isUpgrade(){
				let {
					totalRechargeAmountPercentCom,
					totalOrderAmountPercentCom,
					isBuyVipGoodsCom
				} = this;
				if (totalRechargeAmountPercentCom === 100 || totalOrderAmountPercentCom === 100 || isBuyVipGoodsCom === 100) {
					return true;
				} else {
					return false;
				}
			},
			// 是否是最大等级
			isMaxLv(){
				let { vk, nextLevelInfo } = this;
				return vk.pubfn.isNotNull(nextLevelInfo) ? false : true;
			},
			totalRechargeAmountPercentCom(){
				let that = this;
				let percent = 0;
				let { vk, nextLevelInfo } = that;
				if (nextLevelInfo && nextLevelInfo.name) {
					let total = vk.getVuex("$user.userInfo.account_balance.total") || 0;
					percent = vk.pubfn.toDecimal(total / nextLevelInfo.total_recharge_amount * 100, 2);
					if (percent<0) percent = 0;
					if (percent>100) percent = 100;
 				}
				return percent;
			},
			differenceRechargeAmountCom(){
				let that = this;
				let difference = 0;
				let { vk, nextLevelInfo } = that;
				if (nextLevelInfo && nextLevelInfo.name) {
					let total = vk.getVuex("$user.userInfo.account_balance.total") || 0;
					difference = vk.pubfn.priceFilter(nextLevelInfo.total_recharge_amount - total);
					if (difference<0) difference = 0;
				}
				return difference;
			},
			totalOrderAmountPercentCom(){
				let that = this;
				let percent = 0;
				let { vk, nextLevelInfo } = that;
				if (nextLevelInfo && nextLevelInfo.name) {
					//let total = vk.getVuex("$user.userInfo.account_per.my_payment") || 0;
					let total = that.sumReceiptAmount || 0;
					percent = vk.pubfn.toDecimal(total / nextLevelInfo.total_order_amount * 100, 2);
					if (percent<0) percent = 0;
					if (percent>100) percent = 100;
				}
				return percent;
			},
			isBuyVipGoodsCom(){
				return this.isBuyVipGoods ? 100 : 0;
			},
			differenceOrderAmountCom(){
				let that = this;
				let difference = 0;
				let { vk, nextLevelInfo } = that;
				if (nextLevelInfo && nextLevelInfo.name) {
					//let total = vk.getVuex("$user.userInfo.account_per.my_payment") || 0;
					let total = that.sumReceiptAmount || 0;
					difference = vk.pubfn.priceFilter(nextLevelInfo.total_order_amount - total);
					if (difference<0) difference = 0;
				}
				return difference;
			},
			upgradeTextCom(){
				return vk.getVuex('$user.userInfo.vip_lv') > 0 ? '升级' : '领取';
			},
			// 是否显示会员权益
			showVipBenefitsCom(){
				let { complete, vipInfo = {} } = this;
				let have = (vipInfo.discount < 1 || vipInfo.is_free_shipping || vipInfo.integral_ratio>1 || vk.pubfn.isNotNull(vipInfo.custom_service)) ? true : false;
				return (complete && vipInfo.lv > 0 && have) ? true : false;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.app{
		--bgcolor:#333333;
	}
	.vip-card{
		background-color: #b9c3d5;
		width: 80%;
		margin: 0rpx auto;
		height: 260rpx;
		border-radius: 20rpx;
		position: relative;
		padding: 30rpx;
		overflow: hidden;
		box-shadow:2rpx 6rpx 4rpx 6rpx #b9c3d5;
		color: #3a4b6c;
		.name{
			margin-top: 40rpx;
			font-size: 40rpx;
			font-weight: bold;
		}
		.nickname{
			margin-top: 20rpx;
			font-size: 24rpx;
		}
		.add-time{
			font-size: 24rpx;
			text-align: right;
			.time-text{
				min-width: 140rpx;
				display: inline-block;
			}
		}
		.vip-bg{
			position: absolute;
			right:-25rpx;
			top:-45rpx;
			font-size: 150rpx;
			font-weight: bold;
			color: #ffffff;
			opacity: 0.3;
		}
	}

	.vip-explain{
		width: 90%;
		margin: 60rpx auto 0 auto;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		.cell-box{
			display: flex;
			padding: 20rpx 0;
			.title{
				width: 160rpx;
				font-weight: bold;
				font-size: 30rpx;
			}
			.text{
				flex: 1;
				font-weight: bold;
				color: var(--main);
			}
		}
		.list{
			background-color: #f7f9fd;
			padding: 20rpx;
			border-radius: 20rpx;
			overflow: hidden;
			.list-item{
				display: flex;
				margin-top: 50rpx;
				align-items: center;
				.list-item-text{
					flex: 1;
					margin-left: 30rpx;
					.item-title{
						font-weight: bold;
						font-size: 34rpx;
					}
					.item-describe{
						margin-top: 6rpx;
						font-size: 26rpx;
						color: #9d9d9d;
					}
					.item-amount{
						margin-top: 6rpx;
						font-size: 26rpx;
						color: #9d9d9d;
					}
					.sum-not-receipt-amount{
						margin-top: 6rpx;
						font-size: 24rpx;
						color: #9d9d9d;
					}
				}
			}
			.list-item:first-child{
				margin-top: 0rpx;
			}
		}
	}

	.receive-btn{
		background: linear-gradient(to right, #f8e4c3, #e5c38c);
		border-radius: 40rpx;
		width: 90%;
		margin: 40rpx auto;
		color: #624520;
		padding: 24rpx;
		font-weight: bold;
		text-align: center;
		letter-spacing :2rpx;
	}
	.receive-btn:active{
		opacity: 0.7;
	}
</style>
